<template>
	<view>
		<!-- 导航栏 -->
		<ak-navbar title="售后-退款单" :status="statusInfo.status" :image="statusInfo.image">
			<view class="u-flex" slot="right" v-if="statusInfo.state == 1">
				<view class="yx-bt" style="margin-right: 20rpx;" @click="refuseShow = true">
					拒绝申请
				</view>
				<view class="yx-bt" @click="agreeShow = true">
					立即退款
				</view>
			</view>
		</ak-navbar>
		<!-- 导航栏占位盒子 -->
		<view class="u-m-b-20" :style="{height:(statusBarHeight+270)+'rpx',}"></view>
		<!-- <view class="u-m-b-20" style="height: 270rpx;"></view> -->
		<!-- 拒绝原因 -->
		<view v-if="info.rejectionReason" class="box-color box-padding u-m-b-20 u-m-t-20">
			<text class="u-font-32 text-bold">拒绝原因</text>
			<text class="u-font-30 u-m-l-34">{{ info.rejectionReason }}</text>
		</view>
		<!-- 退款金额 -->
		<view class="box-color box-padding u-m-b-20 u-m-t-20">
			<text class="u-font-32 text-bold">退款金额</text>
			<text class="u-font-32 badge-color u-m-l-34">￥{{ info.amount }}</text>
		</view>
		<!-- 退款原因 -->
		<view class="box-color box-padding u-m-b-20 u-m-t-20">
			<text class="u-font-32 text-bold">退款原因</text>
			<text class="u-font-30 u-m-l-34">{{ info.refundReasons }}</text>
		</view>
		<!-- 货物状态 -->
		<view class="box-color box-padding u-m-b-20 u-m-t-20">
			<text class="u-font-32 text-bold">货物状态</text>
			<text class="u-font-30 u-m-l-34">{{ info.isReceived == 1 ? '已收到货' : '未收到货' }}</text>
		</view>
		<!-- 商品信息 -->
		<view class="box-color box-padding-col">
			<view class="u-font-32 text-bold" style="height: 90rpx; line-height: 90rpx;">
				售后商品
			</view>
			<view class="list-item">
				<view class="item-header">
					<view class="left">
						{{ info.sellerShopName }}
					</view>
					<view class="right">
						<text v-if="info.kaipiao" style="font-size: 26rpx;color: #F0B400">已开票</text>
						<text v-if="info.fahuo" :style="{marginLeft: '20rpx', fontSize: '26rpx', color: themeColor}">代发货</text>
					</view>
				</view>
				<view class="item-content">
					<img :src="resourcesUrl + info.resourceId" alt="" style="width: 180rpx;border-radius: 10rpx;">
					<view class="u-flex-col u-row-around u-m-l-20" style="flex-grow: 1;">
						<view>{{ info.itemName }}</view>
						<view class="u-flex u-row-between">
							<view class="u-flex u-row-left">
								<view class="grey-box">
									{{ info.specification }}
								</view>
							</view>
							<view class="u-font-32">
								￥{{ info.actuallyPrice }}
							</view>
						</view>
						<view class="u-flex u-row-right ">
							<view class="grey-box">
								x{{ info.quantity }}
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="u-text-right">
					<text class="u-font-28 grey-color">总价</text><text class="u-font-32 grey-color">￥4300.00</text>
					<text class="u-font-28 u-m-l-20">实付款<text class="u-font-36">￥4300.00</text></text>
				</view> -->
				<hr style="margin-top: 30rpx;opacity: 0.1;" />
				<view class="item-footer">
					<text class="u-font-24 grey-color" :selectable="true">{{ info.tradeNo }}</text>
				</view>
			</view>
		</view>
		<!-- 描述和凭证 -->
		<view class="box-color box-padding">
			<text class="text-bold u-font-32">描述和凭证</text>
			<view class="u-m-t-30">
				<text class="u-font-28 grey-color">{{ info.comments }}</text>
			</view>
			<view style="display: flex;flex-wrap: wrap;margin-top: 20rpx;">
				<image :src="resourcesUrl + item" v-for="(item,index) in info.annex" :key="index" style="width: 140rpx;height: 140rpx;border-radius: 5rpx;margin-right: 20rpx;" mode="" @click="previewImg(index)"></image>
			</view>
		</view>
		<!-- 占位 -->
		<view style="height: 200rpx;"></view>
		<!-- 同意modal -->
		<u-modal :show="agreeShow" content="是否确认退款" @confirm="handleAgree"></u-modal>
		<!-- 拒绝弹窗 -->
		<u-popup v-model="refuseShow" mode="bottom">
			<view class="box-padding">
				<textarea v-model="rejectionReason" placeholder="请输入拒绝原因" style="height: 130rpx;padding-bottom: 20rpx;width: 100%;" />
				<u-button shape="circle" :hair-line="false" hover-class="none" :custom-style="getBtStyle('default')" @click="refuse">确认</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import AkNavbar from '@/components/ak-navbar/index.vue'
	import AkSteps from '@/components/ak-steps/index.vue'
	import { orderStore } from '@/store/order.js';
	import { mapState } from 'pinia';
	export default {
		components: { AkSteps, AkNavbar },
		data() {
			return {
				stepList: [
					{
						name: '待取货',
						time: ''
					},
					{
						name: '卖家已同意退货',
						time: '2021-08-31 16:26'
					},
					{
						name: '发起退货',
						time: '2021-08-31 14:22'
					}
				],
				id: null,
				info: {},
				agreeShow: false,
				statusInfo: {},
				refuseShow: false,
				rejectionReason: ''
			}
		},
		async onLoad(options) {
			this.id = options.id
			await this.getDetail()
		},
		computed:{
			...mapState(orderStore, {afterStatus: 'afterStatus'})
		},
		methods: {
			async getDetail() {
				const res = await this.$http.get('api/AfterSale/GetAfterSalesRefundForm', { params: { id: this.id } })
				this.info = res
				this.statusInfo = this.afterStatus.find(item => {
					return item.state == res.state
				})
			},
			// 拒绝
			async refuse() {
				const res = await this.$http.put('api/AfterSale/RejectApplication', { id: this.id, rejectionReason: this.rejectionReason })
				this.$u.toast('拒绝成功', 1000, 'success')
				this.$mHelper.delayedJump('/pages/sale/shouhou/index', 'reLaunch')
			},
			async handleAgree() {
				const res = await this.$http.put('api/AfterSale/ImmediateRefund?id=' + this.id)
				this.$u.toast('退款成功', 1000, 'success')
				this.$mHelper.delayedJump('/pages/sale/shouhou/index', 'reLaunch')
			},
			previewImg(index) {
				const imageArr = this.info.annex.map(row => {
					return this.resourcesUrl + row
				})
				uni.previewImage({
					current: index,
					urls: imageArr
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-item {
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		.item-header {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			font-weight: bold;
			line-height: 81rpx;
			height: 81rpx;
			.left {
				font-size: 30rpx;
			}
			.right {
				font-size: 26rpx;
				color: $theme-color;
			}
		}
		.item-content {
			display: flex;
			justify-content: flex-start;
			margin-bottom: 30rpx;
			.center {
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}
		}
		.item-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
		}
	}
	.info-item {
		height: 50rpx;
		line-height: 50rpx;
	}
	.info {
		color: $uni-text-color-grey;
		font-size: 28rpx;
	}
	.yx-bt {
		width: 200rpx;
		height: 80rpx;
		border: 1rpx solid $uni-text-color;
		border-radius: 40px;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
	}
</style>
